<html>
  <head>
    <script src="http://api.simile-widgets.org/timeplot/1.1/timeplot-api.js" 
      type="text/javascript"></script>
    <script>
      var timeplot;
      var timeplotAlt;
      
      function timedRefresh(timeoutPeriod) {
	
	var red = new Timeplot.Color('#B9121B');
	var blue = new Timeplot.Color('#193441');
        var green = new Timeplot.Color('#468966');
        var lightGreen = new Timeplot.Color('#5C832F');
	var yellow = new Timeplot.Color('#FFFF00');
	
	
	var timeGeometry = new Timeplot.DefaultTimeGeometry({
	    gridColor: new Timeplot.Color("#000000"),
	    axisLabelsPlacement: "top"
	});

	var valueGeometry = new Timeplot.DefaultValueGeometry({
	    gridColor: "#000000",
	    min: 0.0,
	    max: 0.1
	});
	    
	setTimeout("location.reload(true);",timeoutPeriod);
	var eventSource = new Timeplot.DefaultEventSource();
	var plotInfo = [Timeplot.createPlotInfo({
						id: "srcdata",
						dataSource: new Timeplot.ColumnSource(eventSource,1),
						timeGeometry: timeGeometry,
						valueGeometry: valueGeometry,
						lineColor: yellow,
						showValues: true,
						roundValues: false
						})
			,
			Timeplot.createPlotInfo({
						id: "plot2",
						dataSource: new Timeplot.ColumnSource(eventSource,2),
						timeGeometry: timeGeometry,
						valueGeometry: valueGeometry,
						lineColor: red
						}),
			Timeplot.createPlotInfo({
						id: "plot3",
						dataSource: new Timeplot.ColumnSource(eventSource,3),
						timeGeometry: timeGeometry,
						valueGeometry: valueGeometry,
						lineColor: blue
						})
			];
			
	var plotInfoB = [Timeplot.createPlotInfo({
						id: "plot4",
						dataSource: new Timeplot.ColumnSource(eventSource,1),
						timeGeometry: timeGeometry,
						valueGeometry: valueGeometry,
						lineColor: red,
						showValues: true
						})
			];		
	
	timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
	timeplot.loadText("data.txt", ",", eventSource);
	
	timeplotAlt = Timeplot.create(document.getElementById("my-alttimeplot"), plotInfoB);
	timeplotAlt.loadText("data.txt", ",", eventSource);
      }
      
      var resizeTimerID = null;
      function onResize() {
	if (resizeTimerID == null) {
	  resizeTimerID = window.setTimeout(function() {
					    resizeTimerID = null;
					    timeplot.repaint();
					    }, timeoutPeriod);
	}
      }
      </script>
    
    </head>
  <body onload="JavaScript:timedRefresh(10000);" onresize="onResize();"> 
    <h2>Temperature (degree C) vs. Time</h2>
    <div id="my-timeplot" style="height: 350px;"></div>
    <h2>Source Data</h2>
    <div id="my-alttimeplot" style="height: 350px;"></div>
    </body>
  </html>

